
<template>
<div style=" height: 100%; overflow-y: auto;">


    <!--用户名和时间-->
    <div style="display: flex;height: 60px; flex-direction: row; margin: 30px 20px 0 20px ">
      <img :src="inviMsg.avatar" style="border-radius: 50%; width: 50px;height:50px ;margin: 5px 0px 0 20px "  >
      <!--          用户名-->
      <h3 style="margin-left: 20px;color: #2c3e50">
        {{inviMsg.nickName}}

      </h3>
      <div style="margin: 30px 0 0 10px;color: #97a8be;font-size: 10px">

        {{inviMsg.creatTime}}

      </div>
    </div>
    <!--      内容-->
    <div style="margin: 30px 20px 5px 30px">
      <div style="font-size: 25px;font-weight: 600">
        {{inviMsg.title}}

      </div>
      <div style="text-indent: 2em;font-size: 18px; margin-top: 15px" v-html="inviMsg.content">


      </div>
    </div>
    <div style="display: flex; margin-left: 30px">
      <div v-for="(img) in inviMsg.imgUrlList" style="margin: 10px 20px 15px 20px">
        <img :src="img" @click="picture(img)" :width="160" :height="160">

      </div>
    </div>
  <div style="display: flex;padding: 20px 20px 20px 30px;background: #F7FBFF;border-top: solid 1px #dfdfdf">

    <div  style="margin: 0 20px 0 20px;text-align: center">
      <img @click="upvoteInvi" v-if="!isUpvote" src="/icon/zan.png" style="width: 30px;height: 30px;">
      <img v-if="isUpvote" src="/icon/zan-active.png" style="width: 30px;height: 30px;">
      <div >{{inviMsg.upvoteNum}}</div>
    </div>

    <el-input style="margin: 10px 20px 10px 30px" v-model="commentCon" placeholder="请输入内容"></el-input>
    <el-button @click="commentInvi" style="height: 36px; width:100px;margin-top: 10px;margin-right: 20px" icon="el-icon-s-promotion" type="primary">评论</el-button>
  </div>

  <div style="padding: 10px 10px 20px 10px;background: #F7FBFF">

    <div v-for="(item) in commentList">
      <div style="display: flex;height: 50px; flex-direction: row; margin: 20px 20px 0 20px;">

        <!--          用户名-->
        <h3 style="margin-left: 20px;color: #2c3e50">

                  {{item.nickName}}
        </h3>
        <div style="margin: 27px 0 0 10px;color: #97a8be;font-size: 10px">
                  {{item.createTime}}
        </div>
      </div>
      <div style="margin: 5px 80px 0 40px;padding-bottom:10px;border-bottom: solid 1px #dfdfdf">{{item.content}}</div>
    </div>
  </div>
  <div class="image-preview">
    <el-image style="width: 0; height: 0" ref="previewImg" :src="url" :preview-src-list="srcList">
    </el-image>
  </div>



</div>
</template>
<script>
import {getToken} from "@/utils/auth";
import { listPromInvitation, getPromInvitation, delPromInvitation, addPromInvitation, updatePromInvitation , getBaseUrl, deleteAdopImg} from "@/api/petSys/promInvitation";
import { listCollect, getCollect, delCollect, addCollect, updateCollect } from "@/api/petSys/collect";
import { listComment,getComment,addComment} from "@/api/petSys/comment";

export default {

  name: "InviDetails",
  data() {
    return {

      profilePhotoUrl:"",
      id: 0,
      // disabled: false,
      headers: {Authorization: "Bearer " + getToken()},
      fileUrlList: [],
      petTypeList: [],
      imgUrlList: [],
      bastUrl: "",
      userId: 0,

      commentCon:"",
      inviMsg:{},
      isUpvote:false,
      commentList:[],
      url:"",
      srcList:[]

    };
  },
  created() {
    if(this.$route.query.id){
      this.id = this.$route.query.id;
    }

    this.getInviMsg()

    this.userId = this.$store.state.user.id;

    this.getIsUpvote()
    this.getComment();
  },
  methods: {
    /**
     * 获取帖子数据
     */
    getInviMsg(){
      getPromInvitation(this.id).then(response => {
        this.inviMsg = response.data
        console.log(response.data)
        for (var i = 0; i < this.inviMsg.imgUrlList.length; i++) {
          this.inviMsg.imgUrlList[i] = this.inviMsg.imgUrlList[i].replace(/\\/g, "/")
          this.inviMsg.imgUrlList[i] = "/" + this.inviMsg.imgUrlList[i]
          console.log(this.inviMsg.imgUrlList[i])

        }
      })
    },

    /**
     * 点赞帖子
     */
    upvoteInvi(){
      this.inviMsg.upvoteNum = this.inviMsg.upvoteNum + 1

      let data = {
        id:this.id,
        upvoteNum:this.inviMsg.upvoteNum
      }
      updatePromInvitation(data).then(response => {
        this.isUpvote = true;
      })
      let upvoteRecardData ={
        userId : this.userId,
        inviId:this.id

      }
      addCollect(upvoteRecardData).then(response => {
        console.log("记录点赞",response)
      })
    },


    /**
     * 获取该帖子是否点赞
     */
    getIsUpvote(){
      let data = {
        userId:this.userId,
        inviId:this.id
      }
      listCollect(data).then(response => {
        console.log(response)
        if(response.rows.length > 0){
          this.isUpvote = true
        }else{
          this.isUpvote = false
        }
      })
    },

    /**
     * 评论帖子
     */
    commentInvi(){
      let data = {
        content:this.commentCon,
        inviId:this.id,
        commUserId:this.userId,
        parentCommId:0,
        upvoteNum: 0
      }
      addComment(data).then(response=>{
        this.getComment();
        console.log("评论成功",response);
        this.commentCon = "";
      })
    },
    /**
     * 获取评论
     */
    getComment(){
      let data = {
        inviId:this.id
      }
      listComment(data).then(response=>{
        this.commentList = response.rows
        console.log("评论",response)
      })
    },
    picture(value) {
      // console.log(value)
      this.srcList = [value]
      this.viewBigPicture()
    },
    viewBigPicture() {
      this.$refs.previewImg.showViewer = true
    }
  }
};
</script>

<style scoped lang="scss">

</style>
